"Header full responsive + fixed navbar + animation effects | Shine v.1"
Bootstrap 3.3.0 Snippet by eXP Design

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<head><!-- Fonts and Animation -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Anton">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bangers">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.css">
</head>
<body>
<header>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header"><a class="navbar-brand navbar-link" href="https://www.instagram.com/exp__designer/" target="blank"><i class="material-icons">cast</i></a>
<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
</div>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav navbar-right">
<li role="presentation"><a target="blank" href="https://www.instagram.com/exp__designer/">start now</a></li>
<li role="presentation"><a href="#">how to use</a></li>
<li role="presentation"><a href="#">online streamers</a></li>
<li role="presentation"><a href="#">sign in</a></li>
<li role="presentation"><a href="#">contact </a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 data-aos="fade-right" data-aos-duration="1800" data-aos-once="true">Shine </h1>
<p data-aos="fade-left" data-aos-duration="1800" data-aos-once="true">your creative streaming platform </p>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
header {
height:100vh;
background-image:url('https://img1.picload.org/image/ddolpcwa/woman-2486528_1920.jpg');
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
}
@media (max-width:767px) {
header {
height:100%;
}
}
.navbar.navbar-default.navbar-fixed-top {
background:transparent;
}
.navbar-default .navbar-nav > li > a {
color:#fff;
text-transform:uppercase;
}
.navbar-default .navbar-nav > li > a:hover {
color:#fff;
}
.navbar-brand.navbar-link {
color:#fff;
}
header .row {
margin-top:30vh;
}
header h1 {
text-align:center;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
$(document).ready(function(){
AOS.init({ disable: 'mobile' });
});
/* for mobile support delet the 'mobile' */
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Login and Register Modal
Ripple Dot Animation
Success and Error Icon Animation
Bootstrap4 navigation border animation

Questions / Comments:

For those, who wants to re-use it. If you want to change the color of the navbar, since it will appear with default colors (gray and hover to black), use that updated CSS functions:

.navbar-default .navbar-nav > li > a {

color:#fff !important;

text-transform:uppercase;

}

.navbar-default .navbar-nav > li > a:hover {

color: #11ff75 !important;

}

.navbar-brand.navbar-link {

color:#11ff75 !important;

}

Lane Boy (1) - 6 years ago - Reply 1